The Principle of Common Region: Containers Create Groupings 原理：容器建立分組

在視覺設計中，處於同一區域內的元素會被視為相關聯的。透過理解 Gestalt 原則，可以幫助設計師構建更直觀的使用者介面，提高使用者的互動效率。

構建清晰的結構

使用者在訪問網頁或應用時，會快速判斷完成任務需要關注的區域。明確、組織良好的介面能讓使用者快速識別介面的基本結構，從而找到相關的互動區域。

例如，在 Slack 應用中，暗色背景將所有 UI 控制元件分組在一起。在該背景下，進一步的線條劃分則建立了其他子區域，用於區分頂部的搜尋與導航區域、左側的工作空間，以及工作空間內的頻道。

容器傳達關係

可見邊界幫助使用者理解頁面中資訊或 UI 元素的關聯。例如，文章頁面中的圖片通常與說明文字分組在同一邊界內，以確保它們之間的關係清晰，同時與其他文章內容分開。

類似的邏輯應用於標籤和手風琴選單等元件中。透過在同一區域內顯示標籤和相關內容，可以清楚地傳達分組關係。例如，Athleta 移動應用的手風琴選單，將子分類和頂級標題分組在同一容器內，使導航的層次結構清晰明瞭。

公共區域優於其他分組原則

建立清晰邊界是一種強大的視覺提示，可以優於鄰近性或相似性等其他分組原則。

例如，在 Food Network 平板應用的早期版本中，配方名稱與相關資訊之間的空隙過大，導致使用者難以判斷哪些資訊屬於同一個配方。後續版本透過卡片式佈局將每個配方的影象、標題和詳細資訊分組在一個邊界內，從而解決了這個問題。

此外，在對比表中，透過“斑馬線”樣式（交替的背景顏色）可以清晰地分隔行，而列之間則透過空白或其他邊界區分。注意：過度使用可能導致介面雜亂。雖然邊界能有效傳遞分組資訊，但過度使用可能使設計顯得雜亂。僅靠空白即可實現分組時，使用邊界往往是多餘的。

例如，在 Backcountry.com 的移動版篩選選單中，每個篩選類別都被單獨的邊框分隔開。實際上，僅靠鄰近性即可傳遞分組關係，因此這些邊框可以省略，以簡化介面並增加內容空間。

此外，分割頁面的全寬邊框可能製造出“假底”，讓使用者誤以為已到達頁面末尾，從而中斷滾動行為。例如，Better Homes and Garden 的首頁採用了全寬背景色分隔內容，這種設計可能讓使用者誤以為閱讀已經結束。

結論

Common Region 原理在 UI 設計中隨處可見，可用於視覺上統一相關的 UI 元件。當空白不足以實現分組時，容器是一種有效的補充。然而，過多的邊框和背景色會增加介面雜亂感，因此在新增之前需考慮其必要性並結合可用性測試結果進行權衡。